<template>
	<view class="contents">
		<view class="topbgc" style="height: 180rpx;">
			<view class="back">
			<image src="../../static/back.png" mode="" @click="backPrePage"></image>
		</view>
		<view class="page_title">
			积分商城
		</view>
		</view>
		
		<view class="individual_points">
			<view class="head_portrait">
				<image :src=useravatars mode=""></image>
			</view>
			<view class="points">
				<view class="shang">
					<view class="num">
						{{userinfo.gold_num}}
					</view>
					<view class="icon">
						<image src="../../static/jifenlogo.png" mode=""></image>
					</view>
				</view>
				<view class="xia">
					你的积分超过全国{{userinfo.percentage}}的用户
				</view>
			</view>
		</view>
		<view class="good_exchange">
			<view class="exchange">
				好物兑换
			</view>
			<view class="more_good">
				<!-- <text>更多好物</text> -->
				<!-- <view class="arrow">
					<image src="../../static/rightarrow.png" mode=""></image>
				</view> -->
			</view>
		</view>
		<view class="good_lists">
			<view class="goods" v-for="(item,index) in goodsList" :key="index" @click.native="gotoPointsProductDetails(item.id,item.give_gold_num)">
				<view class="pro_img">
					<image
						:src="item.image"
						mode="aspectFill"></image>
				</view>
				<view class="pro_title">
					{{item.store_name}}
				</view>
				<view class="pro_price">
					<view class="price">
						<text class="symbol">￥</text><text class="yuan">{{item.price.split('.')[0]}}.</text><text class="fen">{{item.price.split('.')[1]}}</text>
					</view>
					<view class="add_integral">
						<view>+{{item.expend_integral}}</view>
						<view class="love">
							<image src="../../static/jifenlogo.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		integralGoods,
		obtainUserInfo
	} from '@/api/api.js'
	export default {
		data() {
			return {
                  goodsList:[],      //积分商品列表
				  userinfo:{         //积分用户信息
					  gold_num:'0.00',
					  percentage:'0.00%'
				  },      
				  useravatars:'../../static/logo.png'   //用户头像
			}
		},
		
		onLoad() {
			if(!uni.getStorageSync('userInfo')) {
				uni.navigateTo({
					url:'/page_login/index/index'
				})
			}
			else {
				let useravatars = uni.getStorageSync('userInfo').avatarUrl
			// console.log(useravatars)
			this.useravatars = useravatars
			}
			
		},
		onShow() {
			this.init()
			this.obtainUserInfo()
		},
		methods: {
			backPrePage() {
				uni.navigateBack()
			},
			gotoPointsProductDetails(id,jf) {
				uni.navigateTo({
					url:`/page_home/agriculturaldetail/agriculturaldetail?id=${id}&jf=${jf}`
				})
			},
			// 获取积分商品
			init() {
				let data = `page=1&limit=10`
				integralGoods(data).then(res => {
					console.log(res)
					if (res.data.code == '200') {
						this.goodsList = res.data.data
					} else {}
				})
				console.log('积分商品：',this.goodsList)
			},
			//获取积分用户信息 
			obtainUserInfo() {
				obtainUserInfo().then(res => {
					// console.log(res)
					if(res.data.code=='200'&&res.data.data.length!=0) {
						this.userinfo = res.data.data
					}
					
					// console.log(this.userinfo)
				})
			}
			
		},
		
		
	}
</script>

<style lang="scss">
	.contents {
		width: 100%;
		min-height: 100vh;
		.topbgc {
			width: 100%;
			height: 180rpx;
			background-color: #1AB374;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			z-index: 999;
		}

		// background-color: rgb(247, 249, 252);
		.back {
			width: 36rpx;
			height: 36rpx;
			position: fixed;
			left: 36rpx;
			top: 110rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.page_title {
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			top: 110rpx;
		}
		.individual_points {
			padding: 240rpx 28rpx 40rpx;
			background-color: #1AB374;
			display: flex;

			.head_portrait {
				box-sizing: border-box;
				height: 120rpx;
				width: 120rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				border: 4rpx solid #fff;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.points {
				color: #fff;
				height: 120rpx;
				display: flex;
				flex-direction: column;
				align-items: space-between;
				justify-content: space-between;
				margin-left: 28rpx;

				.shang {
					display: flex;
					justify-content: space-between;
					font-size: 56rpx;

					.icon {
						width: 50rpx;
						height: 37.5rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.xia {
					color: #fff;
					font-size: 24rpx;
				}
			}

		}

		.good_exchange {
			padding: 28rpx;
			display: flex;
			justify-content: space-between;

			.exchange {
				font-size: 32rpx;
				font-weight: 600;
			}

			.more_good {
				display: flex;
				align-items: center;
				color: #999;
				font-size: 24rpx;

				.arrow {
					width: 28rpx;
					height: 28rpx;

					image {
						width: 100%;
						height: 100%;
						margin: auto 0;
					}
				}
			}
		}

		.good_lists {
			padding: 0 28rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.goods {
				box-sizing: border-box;
				padding: 10rpx 28rpx;
				width: 336rpx;
				height: 470rpx;
				border: 4rpx solid rgb(247, 249, 252);
				border-radius: 8rpx;
				margin-bottom: 14rpx;

				.pro_img {
					width: 100%;
					height: 300rpx;
					margin: 20rpx auto;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.pro_title {
					font-size: 24rpx;
					font-weight: 600;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.pro_price {
					color: #ED742E;
					display: flex;
					align-items: flex-end;
					margin-bottom: 20rpx;

					.price {
						.yuan {
							font-size: 48rpx;
							font-weight: 600;
						}
					}

					.add_integral {
						font-size: 24rpx;
						color: #999;
						margin-bottom: 6rpx;
						margin-left: 6rpx;
						display: flex;
						align-items: center;

						.love {
							margin-left: 6rpx;
							width: 40rpx;
							height: 40rpx;

							image {
								width: 100%;
								height: 100%;
								margin: auto;
							}
						}
					}

				}
			}
		}
	}
</style>
